<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="container">
    <!-- <el-tabs style='margin-top:15px;' v-model="activeName">
      <el-tab-pane v-for="item in tabMapOptions" :label="item.name" :key='item.id' :name="item.code">
        <keep-alive>
          <tab-pane v-if='activeName==item.code' :type='item.id'></tab-pane>
        </keep-alive>
      </el-tab-pane>
    </el-tabs> -->
    <el-row>
      <el-button type="primary" @click="showaddrole" size="mini">添加角色</el-button>
      <div style="float:right;">
        <span style="font-size: 14px;color: rgba(255,255,255,.7)">角色</span>
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;margin:0 10px;" class="filter-item" v-model="listQuery.name" size="mini">
        </el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="handleFilter" size="mini">查询</el-button>
      </div>
    </el-row>
    <el-table ref="multipleTable" :data="rolelist" v-loading.body="listLoading" style="width: 100%;margin-top: 10px;"header-row-class-name="headerbg">
      <!-- <el-table-column label="序号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <span @click="handleUpdate(scope.row)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
          <span @click="handleDelete(scope.row)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
          <span @click="handleAuth(scope.row)" class="comm-table-btn"><icon-svg icon-class="qxfp" style="fill:#50E3C2" /></span>
        </template>
      </el-table-column>
    </el-table>
    <el-footer>
      <el-pagination style="float:right;margin-top: 7px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>

    <el-dialog :visible.sync="iseditauth" title="权限分配" :fullscreen='true' :show-close='false' custom-class="fulldialog">
       <!-- 自定义关闭按钮 -->
      <span class="custom-dialog-btn" @click="cancel">
        <i class="el-icon-close"></i>
      </span>
      <div class="dialog-within-scroll">
      <el-scrollbar style="height:100%">
      <el-tree
        :data="authtreedata"
        show-checkbox
        node-key="id"
        @check="nodecheck"
        :props="defaultprops"
        ref="treedata"
        :expand-on-click-node='false'
        :check-strictly="strictmodel"
        :default-expand-all="true">
      </el-tree>
      </el-scrollbar>
      </div>
      <!-- <h2>可视化大屏</h2>
      <el-checkbox-group v-model="viewscreen" style="width: 500px;">
        <el-checkbox label="数据大屏" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="设备运行情况" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <div style="clear: both;"></div>
      </el-checkbox-group>
      <h2>APP</h2>
      <el-checkbox-group v-model="apps" style="width: 500px;">
        <el-checkbox label="报警信息" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="交接班" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="维保工作" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <el-checkbox label="电气火灾" style="float: left;margin:0 37px 20px 0;"></el-checkbox>
        <div style="clear: both;"></div>
      </el-checkbox-group> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveauth" size="mini">保 存</el-button>
        <el-button @click="cancel" size="mini" type="text">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="删除角色" :visible.sync="isdelrole" :show-close='false' custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <p>{{delusertext}}</p>
      </div>
      <div slot="footer" class="dialog-footer" v-if="percount==0">
        <el-button type="danger" size="mini" @click="delrole">删除</el-button>
        <el-button type="text" size="mini" @click="isdelrole=false">取消</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button type="primary" size="mini" @click="isdelrole=false">知道了</el-button>
      </div>
    </el-dialog>
    <slider-panel :Show.sync="isaddrole" custom-class="out-side-frame">
      <div class="form-content-class">
        <el-form label-position="top" ref="roleform" label-width="80px" :model="rolename" :rules="rolerules" @submit.native.prevent>
          <el-form-item label="角色" prop="name">
            <el-input v-model.trim="rolename.name" placeholder="最多输入50个字符"></el-input>
          </el-form-item>
            <el-button v-if="roletitle=='添加角色'" type="primary" @click="addrole('roleform')" size="mini" native-type="submit">保 存</el-button>
            <el-button v-else type="primary" @click="saverole('roleform')" size="mini" native-type="submit">保 存</el-button>
            <el-button @click="rolecancel('roleform')" type="text" size="mini">取 消</el-button>
        </el-form>
      </div>
    </slider-panel>
  </div>
  </div>
</template>

<script>
import {
  getAllGroupTypes,
  addObj,
  putObj,
  delObj,
  getSpeObj,
  getQuerylist,
  getUserMenu,
  editGroup,
} from '@/api/admin/group/index';
import sliderPanel from '@/components/SliderPanel'
export default {
  name: 'group',
  components: {sliderPanel},
  data() {
    return {
      listQuery:{
        page:1,
        name:"",
        limit:10,
      },
      total:null,
      rolelist:[],
      listLoading:false,
      iseditauth:false,
      viewscreen:[],
      apps:[],
      curroleid:"",
      isdelrole:false,
      isaddrole:false,
      rolename:{
        name:"",
      },
      rolerules:{
        name:[
          {
            required: true,
            message: '请输入角色',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '最多输入50个字符',
            trigger: 'blur'
          }
        ]
      },
      delusertext:"",
      roletitle:"",
      roleupdateid:"",
      authtreedata:[
        {
            id: 0,
            title: '管理后台',
            children: []
          },
      ],
      defaultprops:{
        label:"title",
      },
      seledauth:[],
      strictmodel:true,
      percount:0,
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading=true;
      getAllGroupTypes({page:this.listQuery.page,limit:this.listQuery.limit}).then(data => {
          this.rolelist=data.data.rows;
          this.total = data.data.total;
          this.listLoading=false;
      });
    },
    searchDate(){
      this.listLoading=true;
      getQuerylist(this.listQuery).then((res)=>{
            this.rolelist=res.data.rows;
            this.total = res.data.total;
            this.listLoading=false;
        })
    },
    showaddrole(){
      this.roletitle="添加角色";
      this.isaddrole=true;
    },
    handleUpdate(row){
	  this.$refs['roleform'].resetFields();
      this.roletitle="编辑角色";
      this.rolename.name=row.name;
      this.roleupdateid=row.id;
      this.isaddrole=true;
    },
    handleDelete(row){
      this.roleupdateid=row.id;
      this.delusertext="";
      getSpeObj({groupId:row.id}).then((res)=>{
        this.percount=res.data;
        res.data==0?this.delusertext=`确定删除“${row.name}”这个角色吗？`:this.delusertext=`有${res.data}个用户属于${row.name}角色，请先将用户与角色解绑`;
        this.isdelrole=true;
      })
    },
    handleAuth(row){
      this.curroleid=row.id;
      this.iseditauth=true;
      this.strictmodel=true;
      this.authtreedata=[
        {
            id: 0,
            title: '管理后台',
            children: []
          },
      ];
      getUserMenu({groupId:this.curroleid}).then(res=>{
        this.authtreedata[0].children=res.data.menus;
        return res;
      }).then(res=>{
        this.strictmodel=false;
        if (res.data.ids!='') {
          this.$refs["treedata"].setCheckedKeys([0,...res.data.ids],false);
        }
      }).then(()=>{
        this.strictmodel=false;
      })
    },
    saveauth(){
      let data=this.$refs["treedata"].getCheckedNodes(false,true);
      let menuIds=[];
      data.forEach((item,index)=>{
          menuIds.push(item.id);
      });
      editGroup({groupId:this.curroleid,menuIds:menuIds.toString()}).then(res=>{
        if (res.status==200) {
          this.$notify({
            title: '成功',
            message: '权限分配成功',
            type: 'success',
            duration: 2000
          });
          this.iseditauth=false;
          this.$refs["treedata"].setCheckedKeys([]);
        }else{
          this.$notify({
            title: '提示',
            message: res.message,
            type: 'warning',
            duration: 2000
          });
          this.iseditauth=false;
          this.$refs["treedata"].setCheckedKeys([]);
        }
      })
    },
    cancel(){
      this.iseditauth=false;
      this.apps=[];
      this.$refs["treedata"].setCheckedKeys([]);
    },
    handleCurrentChange(val){
      this.listQuery.page=val;
      this.searchDate();
    },
    handleSizeChange(val){
      this.listQuery.limit=val;
      this.searchDate();
    },
    delrole(){
      delObj(this.roleupdateid).then((res)=>{
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.isdelrole=false;
          this.fetchData();
      })
    },
    addrole(formname){
      this.$refs[formname].validate((val)=>{
          if (val) {
            addObj({name:this.rolename.name}).then((res)=>{
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              });
              this.isaddrole=false;
              this.$refs[formname].resetFields();
              this.fetchData();
            })
          }else {
            return false;
          }
      })
    },
    saverole(formname){
      this.$refs[formname].validate((val)=>{
          if (val) {
            putObj(this.roleupdateid,{id:this.roleupdateid,name:this.rolename.name}).then((res)=>{
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.isaddrole=false;
              this.$refs[formname].resetFields();
              this.fetchData();
            })
          }else {
            return false;
          }
      })
    },
    rolecancel(formname){
      this.$refs[formname].resetFields();
      this.isaddrole=false
      this.rolename.name="";
    },
    handleFilter(){
      if (this.listQuery.name=="") {
        this.fetchData();
      }else{
        this.searchDate()
      }
    },
    nodecheck(data,node){

    }
  }
}
</script>

<style lang="scss">
.el-table th {
    background: #f5f7fa;
  }
.container {
  margin: 30px;
}
h2,h4{
  color:#000;
}
 .fulldialog > div {
  width: 500px;
  margin: 0 auto;
}
.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .el-checkbox{
    display: block;
    margin-left: 0;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    left: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
.xf-jc-dialog {
  margin-top:15vh !important;
}
</style>
